<template>
	<view class="" >
		<view class="flex flex-align-items justify-between" style="flex-direction: column;margin-top: 50rpx;margin-bottom: 50rpx;margin-top: 200rpx;">
			<text style="font-size: 35rpx; font-weight: 700;" class="main-text-color">支付￥20元</text>
		</view>
		<view class="padding-x-30 " >
			<view class="flex justify-between flex-align-items">
				<view class="">
					<view class="flex flex-align-items">
						<view class="iconfont icon-zhifubao" style="font-size: 80rpx;color:#007AFF;"></view>
						<view class="padding-x-30 ">
							<view class="font-size-30 font-weight-700">支付宝支付</view>
							<text class="text-color-h">推荐使用支付宝支付</text>
						</view>
					</view>
				</view>
				<view class="">
					<label class="radio"><radio :value="1"  color="#FD6801" v-model="radio" :checked="radio===1" /></label>
				</view>
			</view>
			
			<view class="flex justify-between flex-align-items">
				<view class="">
					<view class="flex flex-align-items">
						<view class="iconfont icon-weixinzhifu" style="font-size: 80rpx;color: #09BB07;"></view>
						<view class="padding-x-30">
							<view class="font-size-30 font-weight-700">支付宝支付</view>
							<text class="text-color-h">推荐使用支付宝支付</text>
						</view>
					</view>
				</view>
				<view class="">
					<label class="radio"><radio color="#FD6801" :value="2" :checked="radio===2" @tap="radioCha(2)"/></label>
				</view>
			</view>
			
			<view class="main-bg-color margin-y-20 flex flex-align-items justify-content" style="margin-top: 60rpx; color: #FFFFFF; font-size: 30rpx; font-weight: 700;border-radius: 10rpx; padding-top: 20rpx; padding-bottom: 20rpx;">确认支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radio:1
			}
		},
		methods: {
			radioCha(i){
				this.radio=i
			}
		}
	}
</script>

<style>

</style>
